<template>
  <div class="flex-row">
    <div class="left-row flex-1 pr-20">
      <div class="section-title mb-20"><svg-icon iconName="biaoti3" class="mr-10"></svg-icon>核心能力</div>
      <div :label="item.title" :name="item.num"  v-for="(item,index) in tabList" :key="index" v-if="index == 0">
          <div class="list-box" >
            <div class="title"> <span>{{index+1}}</span> {{item.name}} </div>
            <div class="mb-20">{{item.label}}</div>
            <ul class="item mb-10" v-if="item.list">
              <li v-for="sitem in item.list">{{sitem.text}}</li>
            </ul>
          </div>
          <div class="img-box bor mt-20" v-if="item.imgUrl">
            <img :src="item.imgUrl" alt="">
          </div>
      </div>
    </div>
    <div class="left-row flex-1 pl-20">
      <div class="mb-20" :label="item.title" :name="item.num"  v-for="(item,index) in tabList" :key="index" v-if="index != 0">
        <div class="list-box">
          <div class="title"> <span>{{index+1}}</span> {{item.name}} </div>
          <div class="mb-20">{{item.label}}</div>
          <ul class="item mb-10" v-if="item.list">
            <li v-for="sitem in item.list">{{sitem.text}}</li>
          </ul>
        </div>
        <div class="img-box bor mt-20" v-if="item.imgUrl">
          <img :src="item.imgUrl" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tab-11-2',
    data () {
      return {
        tabList: [
          {
            imgUrl: require('../../../assets/images/pic/img-11-4.png'),
            name: '数据迁移',
            label: '因为具备异构数据库间的迁移/同步，对于应用系统产生的业务信息，DTS可以高效地将原始存放在RDS中的数据实时迁移/同步至大数据计算服务(HBase，Hive)或分析型数据库(ClickHouse，TiDB)等，以备后面做统计分析使用，提升了用户数据的额外使用价值。',
            list: [
              { text: '多种迁移模式，支持结构对象迁移、全量数据迁移及增量数据迁移；' },
              { text: '多数据源支持，支持RDS、NoSQL、分析型数据库之间的数据迁移；' },
              { text: '完善的数据映射，迁移过程中，根据源库和目标数据库的语法规范，生成完整的执行语句，平稳将源库信息导入目标库；' },
              { text: '强数据一致性，迁移过程中，对目标端增量数据进行解析、封装后二次回放，实现全量、增量数据的完整迁移。' }
            ]
          },
          {
            imgUrl: require('../../../assets/images/pic/img-11-5.png'),
            name: '数据实时同步',
            label: '数据异地灾备，建立一个异地的数据系统。该系统是本地关键应用数据的一个可用复制。在本地数据及应用系统出现灾难时，确保异地保存有一份可用的关键业务数据。DTS提供的实时同步功能，可以确保用户灾备数据系统和原始数据系统时刻保持毫秒级的同步延迟。即使用户原始数据系统发生故障，新的灾备系统，由于和原始系统保持了数据一致，这样对于应用来说，也不会产生什么影响。',
            list: [
              { text: '同步模块服务高可用、故障自动修复，任何一个节点故障，控制中心都能够将这个节点上的所有任务秒级切换到其他节点上，链路稳定性高；' },
              { text: '同步性能高，基于数据库日志解析，完成增量同步，确保目的端和源端数据库保持秒级内的同步延迟。' }
            ]
          },
          {
            imgUrl: require('../../../assets/images/pic/img-11-6.png'),
            name: '数据实时订阅',
            label: '针对应用系统产生的增量数据信息，DTS提供对外订阅服务，允许用户订阅选择特定的关键信息。在这些关键信息产生增量变更的时候，DTS的日志解析模块会将变更信息转化成具体的操作，借助预先设计的SDK接口或者Kafka client，供用户使用，帮助用户完成数据定制化消费。'
          }
        ],
        frameworkImg: require('../../../assets/images/pic/img-11.png')
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>

<style scoped lang="scss">
  .flex-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
  }
  .item{
    padding-left: 20px;
    li{
      list-style: none;
      position: relative;
      &:before{
        position: absolute;
        left: -20px;
        top:6px;
        content: '';
        width: 8px;
        height: 8px;
        background: #FFAC44;
        border-radius: 50%;
      }
    }
  }
</style>
